<template>
	<view>
		<u-navbar>
			<view class="u-nav-slot" slot="left" :style="{width:`calc(750rpx - 20rpx - ${paddingright})`}">
				<view class="left">
					<view class="" @click="back" style="height: 73rpx;display: flex;align-items: center;">
						<image class="back_icon" src="/static/img/back.png" mode=""></image>
					</view>
					<u-search placeholder="搜索你需要购买的商品" v-model="keyword" height='73rpx' :disabled="true" @click='clickto("/pages/searchpage/searchpage")' :showAction='false'></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="top" :style="{paddingTop:marginTop+'px'}">
			<u-tabs @click="tabsChange" itemStyle='height:80rpx;' :list="list1" lineHeight='12rpx' lineWidth='32rpx'
				lineColor='#FF7428' activeStyle="color:#232323;font-size:41.67rpx;font-weight: bold;"
				inactiveStyle="color:#707070;fontSize:31.95rpx"></u-tabs>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="content">
				<proitem v-for="(item,index) in prolist" :key="index" :pro="item"></proitem>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {storeByLat} from '@/api/home.js'
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	export default {
		data() {
			return {
				keyword: '',
				paddingright: 0,
				marginTop: 0,
				paddingTop: 0,
				list1: [],
				prolist:[],
			};
		},
		onLoad(option) {
			// #ifdef MP
			this.paddingright = `calc(750rpx - ${menuButtonInfo.left}px + 32rpx)`
			// console.log(this.paddingright)
			// #endif
			this.marginTop = 44 + uni.getStorageSync('statusBarHeight')
			storeByLat({lat:option.lat,lng:option.lng}).then(res=>{
				this.list1=res.data.data.category
				this.getlist(this.list1[0].id)
			})
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			getlist(category_id){
				storeByLat({lat:'104.06792342662811',lng:'30.62940746285803',category_id}).then(res=>{
					// console.log(res)
					this.prolist=res.data.data.list.data
				})
			},
			tabsChange(index){
				// console.log(index)
				this.getlist(index.id)
			},
			clickto(url){
				uni.$u.route(url)
			}
		}
	}
</script>

<style lang="less">
	.u-nav-slot {
		display: flex;
		align-items: center;
		width: calc(750rpx - 52rpx);

		.left {
			width: 100%;
			display: flex;
			align-items: center;

			.back_icon {
				width: 18rpx;
				height: 32rpx;
				margin-right: 29rpx;
			}
		}
	}
	.content {
		background-color: #F7F7F9;
		padding: 26rpx 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.scroll-view {
		height: calc(100vh - 44px - var(--status-bar-height) - 80rpx);
	}
</style>
